<template>
  <div class="welcome">
    <span class="title">欢迎使用TLate翻译系统</span>
    <el-tooltip class="box-item" effect="dark" placement="bottom">
      <span class="use"><el-icon style="margin-right: 4px;">
          <InfoFilled />
        </el-icon>使用须知</span>
      <template #content>
        <div class="rows">
          <div class="row">1.自动翻译失败时,可手动点击"翻译"按钮</div>
          <div class="row">2.翻译历史列表,只展示前二十条</div>
          <div class="row">3.点击翻译历史tag,可查看历史翻译</div>
          <div class="row">4.点击"保存翻译版本"按钮,可对当前翻译进行保存</div>
          <div class="row">5.点击"清空"按钮,可清空翻译框和翻译结果列表</div>
          <div class="row">6.本系统可进行1对多种语言进行翻译</div>
        </div>
      </template>
    </el-tooltip>
  </div>
</template>

<script setup>
</script>

<style scoped lang="scss">
.welcome {
  display: flex;
  align-items: center;
  color: #333;

  .title {
    margin-right: 20px;
  }

  .use {
    display: flex;
    align-items: center;
    color: var(--el-color-primary);
    cursor: pointer;
  }
}
</style>
